<script> export default {name: 'system:kikiUser'} </script>
<template>
	<el-container>


		<el-container ref="printMain">
			<el-header class="mine-el-header">
				<div class="panel-container">
					<!--列表操作-->
					<div class="left-panel">
						<el-button
							icon="el-icon-plus"
							v-auth="['system:kikiUser:save']"
							type="primary"
							@click="add"
						>新增
						</el-button>

						<el-button
							type="danger"
							plain
							icon="el-icon-delete"
							v-auth="['system:kikiUser:delete']"
							:disabled="selection.length==0"
							@click="batchDel"
						>删除
						</el-button>

						<ma-import
							:auth="['system:kikiUser:import']"
							:upload-api="systemKikiUser.importExcel"
							:download-tpl-api="systemKikiUser.downloadTemplate"
							@success="handleSuccess()"
						/>

						<el-button icon="el-icon-download" v-auth="['system:kikiUser:export']" @click="exportExcel">导出</el-button>
					</div>
					<div class="right-panel">
						<div class="right-panel-search">

							<el-input v-model="queryParams.username" placeholder="请输入" clearable/>

							<el-tooltip class="item" effect="dark" content="搜索" placement="top">
								<el-button type="primary" icon="el-icon-search" @click="handlerSearch"></el-button>
							</el-tooltip>

							<el-tooltip class="item" effect="dark" content="清空条件" placement="top">
								<el-button icon="el-icon-refresh" @click="resetSearch"></el-button>
							</el-tooltip>

							<el-button type="text" @click="toggleFilterPanel">
								{{ povpoerShow ? '关闭更多筛选' : '显示更多筛选' }}
								<el-icon>
									<el-icon-arrow-down v-if="povpoerShow"/>
									<el-icon-arrow-up v-else/>
								</el-icon>
							</el-button>
						</div>
					</div>
				</div>
				<!--列表筛选-->
				<el-card class="filter-panel" shadow="never">
					<el-form label-width="80px" :inline="true">

						<el-form-item label="手机" prop="phone">
							<el-input v-model="queryParams.phone" placeholder="请输入" clearable/>
						</el-form-item>
					</el-form>
				</el-card>
			</el-header>
			<!--表格列表-->
			<el-main class="nopadding">
				<maTable
					ref="table"
					:api="api"
					:showRecycle="true"
					row-key="id"
					:hidePagination="false"
					@selection-change="selectionChange"
					@switch-data="switchData"
					stripe
					remoteSort
				>
					<el-table-column type="selection" width="50"></el-table-column>

					<el-table-column label="用户名" prop="username"/>

					<el-table-column label="手机" prop="phone"/>

					<!-- 正常数据操作按钮 -->
					<el-table-column label="操作" fixed="right" align="right" width="130" v-if="!isRecycle">
						<template #default="scope">

							<el-button
								type="text"
								@click="tableEdit(scope.row, scope.$index)"
								v-auth="['system:kikiUser:update']"
							>编辑
							</el-button>

							<el-button
								type="text"
								@click="deletes(scope.row.id)"
								v-auth="['system:kikiUser:delete']"
							>删除
							</el-button>

						</template>
					</el-table-column>

					<!-- 回收站操作按钮 -->
					<el-table-column label="操作" fixed="right" align="right" width="130" v-else>
						<template #default="scope">

							<el-button
								type="text"
								v-auth="['system:kikiUser:recovery']"
								@click="recovery(scope.row.id)"
							>恢复
							</el-button>

							<el-button
								type="text"
								v-auth="['system:kikiUser:realDelete']"
								@click="deletes(scope.row.id)"
							>删除
							</el-button>

						</template>
					</el-table-column>

				</maTable>
			</el-main>
		</el-container>
	</el-container>

	<!--操作页面-->
	<save-dialog v-if="dialog.save" ref="saveRef" @success="handleSuccess" @closed="dialog.save=false"/>

</template>
<script setup>
import {ref, reactive, onMounted, nextTick} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import systemKikiUser from '@/api/apis/system/systemKikiUser'
import tool from '@/utils/tool'
import systemDict from '@/api/apis/system/dataDict'
import saveDialog from './save.vue'

const table = ref(null)
const saveRef = ref(null)
const povpoerShow = ref(false)
const isRecycle = ref(false)
const dateRange = ref()
const selection = ref([])
const default_tabs_key = ref('-1')

const dialog = reactive({save: false})
const api = reactive({list: systemKikiUser.getList, recycleList: systemKikiUser.getRecycleList})
const queryParams = reactive({
	username: '',
	phone: '',

})
const dictData = reactive({})

onMounted(async () => {
	await getDictData()
})

//添加
const add = async () => {
	dialog.save = true
	await nextTick()
	saveRef.value.open()
}

// 标签页查询
const handleTabsClick = (name) => {

}

//编辑
const tableEdit = async (row) => {
	dialog.save = true
	await nextTick()
	saveRef.value.open('edit')
	saveRef.value.setData(row)
}

//查看
const tableShow = async (row) => {
	dialog.save = true
	await nextTick()
	saveRef.value.open('show')
	saveRef.value.setData(row)
}

//批量删除
const batchDel = async () => {
	await ElMessageBox.confirm(`确定删除选中的 ${selection.value.length} 项吗？`, '提示', {
		type: 'warning',
		confirmButtonText: '确定',
		cancelButtonText: '取消',
	}).then(async () => {
		let ids = []
		selection.value.map(item => ids.push(item.id))
		let res = isRecycle.value ? await systemKikiUser.realDeletes(ids.join(',')) : await systemKikiUser.deletes(ids.join(','))
		table.value.upData(queryParams)
		ElMessage.success(res.message)
	}).catch(() => {
	})
}

// 单个删除
const deletes = async (id) => {
	await ElMessageBox.confirm(`确定删除该数据吗？`, '提示', {
		type: 'warning',
		confirmButtonText: '确定',
		cancelButtonText: '取消',
	}).then(async () => {
		let res = isRecycle.value ? await systemKikiUser.realDeletes(id) : await systemKikiUser.deletes(id)
		table.value.upData(queryParams)
		ElMessage.success(res.message)
	}).catch(() => {
	})
}

// 恢复数据
const recovery = (id) => {
	systemKikiUser.recoverys(id).then(res => {
		ElMessage.success(res.message)
		table.value.upData(queryParams)
	})
}

//表格选择后回调事件
const selectionChange = (items) => {
	selection.value = items
}

const toggleFilterPanel = () => {
	povpoerShow.value = !povpoerShow.value
	document.querySelector('.filter-panel').style.display = povpoerShow.value ? 'block' : 'none'
}

//搜索
const handlerSearch = () => {
	table.value.upData(queryParams)
}

// 切换数据类型回调
const switchData = () => {
	isRecycle.value = !isRecycle.value
}

// 重置搜索
const resetSearch = () => {
	for (let k in queryParams) queryParams[k] = undefined
	table.value.upData(queryParams)
}

// 更新
const handleSuccess = () => {
	table.value.upData(queryParams)
}

// 获取字典数据
const getDictData = () => {

}

// 修改单个数据
const updateSingle = (id, editField, editValue) => {
	let data = {[editField]: editValue};
	systemKikiUser.updateSingle(id, data).then(() => {
		ElMessage.success('修改成功')
	})
}


const exportExcel = () => {
	ElMessage.info('正在处理数据...')
	systemKikiUser.exportExcel(queryParams).then(res => {
		tool.download(res)
	}).catch(e => {
		console.log(e)
	})
}

const numberOperation = (newValue, id, numberName) => {
	systemKikiUser.numberOperation({id, numberName, numberValue: newValue}).then(res => {
		res.success && ElMessage.success(res.message)
	}).catch(e => {
		console.log(e)
	})
}

const switchStatus = (statusValue, id, statusName) => {
	systemKikiUser.changeStatus({id, statusName, statusValue}).then(res => {
		res.success && ElMessage.success(res.message)
	}).catch(e => {
		console.log(e)
	})
}

</script>
